<template>
  <div class="footer">
    <el-row justify="space-around">
      <el-tooltip effect="light" content="QQ" placement="right">
        <el-image :src="url[0]" class="icon qq"/>
      </el-tooltip>
      <el-tooltip effect="light" content="Twitter" placement="right">
        <el-image :src="url[1]" class="icon twitter"/>
      </el-tooltip>
      <el-tooltip effect="light" content="WeChat" placement="right">
        <el-image :src="url[2]" class="icon wechat"/>
      </el-tooltip>
    </el-row>
    <el-divider style="width: 90%;margin-left: 5%"/>
  </div>
</template>

<script setup>
const url = [
    'http://qiniuyun.linter.top/Linter/Vue_img/Bottom/qq-line.png',
    'http://qiniuyun.linter.top/Linter/Vue_img/Bottom/twitter-line.png',
    'http://qiniuyun.linter.top/Linter/Vue_img/Bottom/wechat-2-line.png'
]


</script>


<style scoped>
.footer{
  background-color: rgba(63, 63, 64);
}
.icon{
  margin-top: 1%;
  border-radius: 180px;
}
.qq:hover {
  background-image: url("http://qiniuyun.linter.top/Linter/Vue_img/Bottom/qq-fill.png");
}
.twitter:hover{
  background-image: url("http://qiniuyun.linter.top/Linter/Vue_img/Bottom/twitter-fill.png");
}
.wechat:hover{
  background-image: url("http://qiniuyun.linter.top/Linter/Vue_img/Bottom/wechat-2-fill.png");
}
</style>
